<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 注册</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', '微软雅黑', sans-serif;
            background-color: #f5f5f5;
        }
        .login_wrap {
            animation: fadeIn 0.8s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .form_text_ipt input::placeholder {
            color: #aaa;
        }
        select.lb {
            width: 100%;
            height: 100%;
            border: none;
            padding: 0 5px;
            font-family: '微软雅黑', sans-serif;
            font-size: 15px;
            color: #333;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat;
            background-position: right 10px center;
        }
        .message-container {
            color: #e74c3c;
            text-align: center;
            margin: 15px 0;
            font-size: 14px;
            min-height: 20px;
        }
        .success-message {
            color: #2ecc71;
        }
    </style>
</head>
<body>
<div class="wrap login_wrap">
    <div class="content">
        <div class="logo"></div>
        <div class="login_box">
            <div class="login_form">
                <div class="login_title">
                    账号注册
                </div>
                <form th:action="@{/CanRegister}" method="post" id="registerForm">
                    <input name="roleid" value="2" type="hidden"/>
                    
                    <div class="form_text_ipt">
                        <input name="username" type="text" placeholder="学号/工号" id="username">
                    </div>
                    <div class="ececk_warning" id="username_warning"><span>学号/工号不能为空</span></div>
                    
                    <div class="form_text_ipt">
                        <input name="userpwd" type="password" placeholder="密码" id="password">
                    </div>
                    <div class="ececk_warning" id="password_warning"><span>密码不能为空</span></div>
                    
                    <div class="form_text_ipt">
                        <input name="truename" type="text" placeholder="真实姓名" id="truename">
                    </div>
                    <div class="ececk_warning" id="truename_warning"><span>真实姓名不能为空</span></div>
                    
                    <div class="form_text_ipt">
                       <select name="classid" class="lb" id="classid">
                           <option value="">请选择班级</option>
                           <option name="classid" th:each="pjclass : ${list}" th:value="${pjclass.classid}" th:text="${pjclass.classname}"></option>
                       </select>
                    </div>
                    <div class="ececk_warning" id="class_warning"><span>班级不能为空</span></div>
                    
                    <div class="message-container" id="message-container">
                        <span th:if="${session.cg != null}" th:text="${session.cg}" class="success-message"></span>
                        <span th:if="${session.cz != null}" th:text="${session.cz}"></span>
                        <span th:if="${session.wk != null}" th:text="${session.wk}"></span>
                    </div>
                    
                    <div class="form_btn">
                        <button type="submit" id="register-btn">注册</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>已有帐号？</span><a th:href="@{login}">马上登录</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Handle messages
        if ($("#message-container").text().trim() !== "") {
            var hasSuccess = $("#message-container .success-message").length > 0;
            if (hasSuccess) {
                setTimeout(function() {
                    location.replace("./logout");
                }, 2000);
            } else {
                setTimeout(function() {
                    $("#message-container").fadeOut(500, function() {
                        $(this).text("").fadeIn(0);
                        location.replace("./zclogout");
                    });
                }, 3000);
            }
        }
        
        // Form validation
        $("#registerForm").submit(function(e) {
            var username = $("#username").val().trim();
            var password = $("#password").val().trim();
            var truename = $("#truename").val().trim();
            var classid = $("#classid").val();
            var isValid = true;
            
            if (username === "") {
                $("#username_warning").css("display", "block");
                isValid = false;
            } else {
                $("#username_warning").css("display", "none");
            }
            
            if (password === "") {
                $("#password_warning").css("display", "block");
                isValid = false;
            } else {
                $("#password_warning").css("display", "none");
            }
            
            if (truename === "") {
                $("#truename_warning").css("display", "block");
                isValid = false;
            } else {
                $("#truename_warning").css("display", "none");
            }
            
            if (classid === "") {
                $("#class_warning").css("display", "block");
                isValid = false;
            } else {
                $("#class_warning").css("display", "none");
            }
            
            return isValid;
        });
        
        // Hide warnings when typing/selecting
        $("#username").on("input", function() {
            $("#username_warning").css("display", "none");
        });
        
        $("#password").on("input", function() {
            $("#password_warning").css("display", "none");
        });
        
        $("#truename").on("input", function() {
            $("#truename_warning").css("display", "none");
        });
        
        $("#classid").on("change", function() {
            $("#class_warning").css("display", "none");
        });
    });
</script>
</body>
</html>